<template>
  <div class="mainbody">
    <dv-loading v-show="runFlag" class="loading">Loading...</dv-loading>
    <div class="container">
      <MainTitle :main-title="mainTitle" />
      <div class="view-frame">
        <div v-for="(item,index) of barData" :key="index" class="chart-item">
          <div class="chart-title">{{ item&&item.title?item.title:"暂无标题" }}</div>
          <div class="bar-chart">
            <vechart :options="realOptions(item,baroptions)" />
          </div>
          <p>{{ item&&item.remark?item.remark:"-" }}节能{{ item&&item.percent?(item.percent).toFixed(2):'-' }}%，{{ item&&item.elec?(item.elec).toFixed(2):'-' }}kwh</p>
        </div>
        <div class="chart-item">
          <div class="chart-title">{{ lineData&&lineData.title?lineData.title:"暂无标题" }}</div>
          <div class="bar-chart">
            <vechart :options="realOptions(lineData,lineoptions)" />
          </div>
          <p>{{ lineData&&lineData.remark?lineData.remark:'-' }}节能{{ lineData&&lineData.percent?(lineData.percent).toFixed(2):'-' }}%，{{ lineData&&lineData.elec?(lineData.elec).toFixed(2):"-" }}kwh</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import baroptions from './json/baroption.json'
import lineoptions from './json/lineoption.json'
import data from './json/data.json'
import { mapState } from 'vuex'
export default {
  components: {
    MainTitle: () => import('@/components/MainTitle.vue'),
    vechart: () => import('@components/charts/Vechart.vue')
  },
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // mainTitle: '智慧节能概览',
      chartTitle: '压缩空气转换效率（kwh/CMH）',
      baroptions: baroptions,
      lineoptions: lineoptions,
      data: data,
      resultData: [],
      runFlag: false
    }
  },
  computed: {
    mainTitle() {
      return this.title
    },
    ...mapState({
      service: state => state.service,
      webModel: state => state.authentication.webModel,
      treeTemplate: state => state.component.treeTemplate
    }),
    barData() {
      const barData = []
      const barlist = this.data.slice(0, 3)
      barlist.forEach(e => {
        const i = this.resultData.find(i => i.type === e.type)
        if (i) {
          barData.push(i)
        }
      })

      return barData
    },
    lineData() {
      const linelist = this.data.slice(3, 4)[0]
      const i = this.resultData.find(i => i.type === linelist.type)
      return i
    }
  },
  created() {
    this.$nextTick(() => {
      this.getSavingEnergyOverview()
    })
  },
  methods: {
    realOptions(item, options) {
      return item ? { ...options, series: [{ ...options.series[0], data: item.before }, { ...options.series[1], data: item.after }], xAxis: { ...this.baroptions.xAxis, data: item.x }} : baroptions
    },
    async getSavingEnergyOverview() {
      try {
        this.runFlag = true
        // await this.sleep(1000)
        const result = await this.service.getSavingEnergyOverview()
        if (result && result.flag) {
          this.resultData = result.data
          console.log('traffic', result.data)
        }
        this.runFlag = false
      } catch (e) {
        this.runFlag = false
        this.$notify({
          title: '数据获取出错',
          type: 'error',
          duration: 2500
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.mainbody{
  height: 100vh;
  background: url('~@assets/report/bg.png') no-repeat;
  background-size: 100% 100%;
}
.container{
  position: relative;
  width: 92%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-flow: column;
}
.view-frame{
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  height: 82%;
  overflow-y:scroll;
  margin-top: 1rem;
  // 隐藏滚动条
  &::-webkit-scrollbar {// 兼容Chrome
    display: none;
  }
  &::-o-scrollbar {// 兼容Opera
    display: none;
  }
  scrollbar-width: none;// 兼容Firefox
  -ms-overflow-style: none;// 兼容edge
}
.chart-item{
  flex-basis: 49%;
  height: 48%;
  display: flex;
  flex-flow: column;
  margin-bottom: 1rem;
  background: url('~@assets/report/normal_bg.png') no-repeat;
  background-size: 100% 100%;
  padding: 1rem 0;
}
.chart-item:hover{
  background: url('~@assets/report/highlight_bg.png') no-repeat;
  background-size: 100% 100%;
}
.chart-title{
  color:#00f4ff;
  font-size:1.4rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 1rem;
}
.bar-chart{
  height: 80%;
  flex:1;
}
.chart-item>p{
  text-align: center;
  color: #00f4ff ;
  font-weight: 600;
  font-size: 1.3rem;
}
.loading{
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba($color: #333, $alpha: 0.7);
  z-index: 9;
}
</style>
